<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .center {
            width: 1000px;
            height: 250px;
            border: 1px solid #000;
            float: left;
            margin-left: 13%;
            margin-bottom: 50px;
            margin-top: 50px;
        }

        .center_top {
            width: 1000px;
            height: 40px;
            border-bottom: 1px solid #666;
            background: #e6e6e6;
        }

        .center_top span {
            margin-left: 15px;
            line-height: 40px;
            font-weight: bold;
            color: #666;
        }

        .center_bottom {
            width: 1000px;
            height: 210px;
            float: left;
        }

        .center_bottom_left {
            width: 350px;
            height: 210px;
            float: left;
            color: #666;

        }

        .center_bottom_left form {
            margin-top: 20px;
        }

        .center_bottom_left p {
            text-align: right;
            font-size: 14px;
        }

        .center_bottom_left .no1 span {
            color: red;
        }

        .yanzm {
            margin-right: 100px;
            color: #666;
        }

        #sub {
            width: 85px;
            height: 31px;
            background-color: #fc4c65;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            line-height: 31px;
            margin-right: 80px;
        }

        .center_bottom_center {
            width: 110px;
            height: 210px;

            float: left;
            margin-left: 10px;
        }

        .center_bottom_center a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
            margin-top: 50px;
            position: absolute;
        }

        .center_bottom_center a:hover{
            color: #000;
        }

        .center_bottom_center_btn {
            position: absolute;
            width: 100px;
            height: 22px;
            font-size: 12px;
            background-color: #dedede;
            border-radius: 4px;
            text-align: center;
            line-height: 22px;
            margin-top: 80px;
            margin-left: 10px;
            cursor: pointer;
        }

        .center_bottom_right {
            width: 360px;
            height: 210px;
            float: left;
            margin-left: 120px;
        }

        .center_bottom_right h5 {
            font-weight: bold;
            margin-top: 20px;
            font-size: 14px;
        }

        .center_bottom_right p {
            color: #666;
            padding: 25px 0 0;
            font-size: 14px;
        }

        .center_bottom_right div {
            width: 137px;
            height: 31px;
            background-color: #fc4c65;
            line-height: 31px;
            margin-top: 25px;
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            text-align: center;
        }

        .center_bottom_right a{
            text-decoration:none;
            
        }

        .center_bottom_left p{
            margin-top: 10px;
        }
        
    </style>
</head>

<body>
    <div class="center">
        <div class="center_top">
            <span>用户登录</span>
        </div>
        <div class="center_bottom">
            <div class="center_bottom_left">


                <form action="#">
                    <p class="no1">
                        <span>*</span>手机号: <input type="text" id="utel">
                    </p>
                    <p class="no1">
                        <span>*</span>密码/短信验证码: <input type="password" id="upwd">
                    </p>
                    <p>
                        <span>验证码 </span><input id="code" type="text"><i id="code_d"></i><label></label>
                    </p>
                    <p class="yanzm">
                        <input type="checkbox" id="ckx"><span style="font-size: 12px">记住用户名</span>
                    </p>
                    <p>
                        <button type="submit" id="sub">登录</button>
                    </p>
                </form>
            </div>

            <div class="center_bottom_center">
                <a href="">忘记密码?</a>
                <div class="center_bottom_center_btn">获取短信验证码</div>
            </div>


            <div class="center_bottom_right">
                <h5>您还不是风尚购物用户?</h5>
                <p>现在免费注册成为风尚购物会员，便能立刻享受便宜又放心的购物体验。</p>
                <a href=""><div>注册新用户</div></a>
            </div>
        </div>
    </div>
</body>

</html>